import React from 'react';
import {
  Row,
  Col,
} from 'antd';
import {
  CSSTransition,
} from 'react-transition-group';
import {
  useDispatch,
  useSelector,
} from 'react-redux';
import { Link } from 'react-router-dom';
import {
  HeaderWrapper,
  Logo,
  Nav,
  NavItem,
  FlexLeft,
  FlexRight,
  NavSearch,
  Addition,
  AdditionButton,
  NavSearchWrapper,
  SearchInfoChange,
  SearchInfo,
  SearchInfoTitle,
  SearchInfoItem,
  SearchInfoList,
} from './style';
import './index.scss';
import * as actionCreators from './store/actionCreator';

const Header = () => {
  const dispatch = useDispatch();
  const focused = useSelector((state:any) => state.get('header').get('focused'));
  const list = useSelector((state:any) => state.get('header').get('list'));
  const onMouseIn = useSelector((state:any) => state.get('header').get('onMouseIn'));
  /**
   * input focused
   */
  const handleNavSeatchFocused = () => {
    dispatch(actionCreators.getSearchList());
    dispatch(actionCreators.searchFocused(true));
  };
  /**
   * input blur
   */
  const handleNavSearchBlur = () => {
    dispatch(actionCreators.searchBlur(false));
  };
  /**
   * handleMounseIn
   */
  const handleMousein = () => {
    dispatch(actionCreators.mouseIn());
  };
  /**
   * handleMouseOut
   */
  const handleMouseOut = () => {
    dispatch(actionCreators.mouseOut());
  };
  const getListArea = (focuse:boolean, mouseIn: boolean) => {
    let res = null;
    if (focuse || mouseIn) {
      res = (
        <SearchInfo
          onMouseEnter={handleMousein}
          onMouseLeave={handleMouseOut}
        >
          <SearchInfoTitle>
            热门搜索
            <SearchInfoChange>换一批</SearchInfoChange>
          </SearchInfoTitle>
          <SearchInfoList className="SearchInfoItems">
            {
              list.map((item:any) => <SearchInfoItem key={item}>{item}</SearchInfoItem>)
            }
          </SearchInfoList>
        </SearchInfo>
      );
    }
    return res;
  };
  return (
    <>
      <HeaderWrapper>
        <Row gutter={{ xs: 8, sm: 16, md: 24 }}>
          <Col className="gutter-row" span={2}>
            <Link to="/home">
              <Logo>Logo</Logo>
            </Link>
          </Col>
          <Col className="gutter-row" span={18}>
            <Nav>
              <FlexLeft>
                <NavItem className="left">
                  首页
                </NavItem>
                <NavItem className="left">
                  下载APP
                </NavItem>
                <NavSearchWrapper>
                  <CSSTransition
                    in={focused}
                    timeout={200}
                    classNames="slide"
                  >
                    <NavSearch
                      onFocus={handleNavSeatchFocused}
                      onBlur={handleNavSearchBlur}
                      className={focused ? 'focused' : ''}
                    />
                  </CSSTransition>
                  <i className="iconfont icon-fangdajing" />
                  {getListArea(focused, onMouseIn)}
                </NavSearchWrapper>
              </FlexLeft>
              <FlexRight>
                <NavItem className="right">
                  Aa
                </NavItem>
                <NavItem className="right">
                  登录
                </NavItem>
              </FlexRight>
            </Nav>
          </Col>
          <Col className="gutter-row" span={4}>
            <Addition>
              <AdditionButton className="reg">
                注册
              </AdditionButton>
              <AdditionButton className="writting">
                <i className="iconfont icon-yumaobi" />
                写文章
              </AdditionButton>
            </Addition>
          </Col>
        </Row>
      </HeaderWrapper>
    </>
  );
};

export default Header;
